1440개의 문학 작품 문장으로 하루를 채우는 독특한 시계 웹 서비스 제작 과정.
PoC 프로젝트로 시작한 아이디어 실현기.
TL;DR ; 한줄요약
- 세계 문학 작품에서 시간을 담은 문장을 수집해 매 분마다 다른 문장을 보여주는 시계 제작
- 단순한 숫자 대신 문학적 순간으로 시간을 경험하는 새로운 방식
- PoC(Proof of Concept)로 빠르게 구현하고 배포
- 프로젝트 URL: https://clock.loonshotstudio.com/
프로젝트 개요: 왜 ‘문장의 시간’인가?
아이디어의 시작
우리는 하루에 수십 번, 시계를 본다. 그런데 매번 보는 건 같은 형태의 숫자들뿐이다.
“만약 숫자 대신 문학 작품 속 문장이 시간을 말해준다면?”
이 질문에서 ‘문장의 시간(Time of Sentences)’ 프로젝트가 시작됐다.
핵심 컨셉
- 1440분 = 1440개의 문장: 하루의 모든 분(00:00~23:59)마다 그 시간이 담긴 문학 작품 속 문장을 매칭
- 문학으로 시간 읽기: “06:43″이라는 숫자 대신, 누군가의 소설 속 새벽 6시 43분의 순간을 경험
- 언어를 넘나드는 경험: 다국어 문학 작품을 포함해 다양한 문화권의 시간 표현 수집
기술 스택 & 구현 과정
1. 데이터 수집: 문학 작품 속 시간 찾기
가장 큰 챌린지는 1440개의 시간 표현을 담은 문장을 찾는 것이었다.
데이터 소스
- 저작권이 만료된 고전 문학 작품 (Project Gutenberg 등)
- 공개 도메인 문학 데이터베이스
- 크리에이티브 커먼즈 라이선스 작품들
수집 방법
1. 정규표현식으로 시간 패턴 검색 (“12:30”, “오전 3시”, “three o’clock” 등)
2. 문맥 확인 (실제 시각을 나타내는지 검증)
3. 작품명, 작가, 출처 메타데이터 함께 저장
4. 중복 시간대 우선순위 설정 (문학적 완성도, 문장 길이 등)
2. 프론트엔드 구현
기술 선택
- 프레임워크: React / Next.js
- 스타일링: Tailwind CSS – 미니멀한 타이포그래피 중심 디자인
- 언어 전환: 다국어 지원 (EN, KR 등)
주요 기능
javascript
// 핵심 로직 구조 (의사코드) function getCurrentSentence() { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const timeKey = `${hours}:${minutes}`; return literaryDatabase[timeKey]; } // 매 분마다 업데이트 setInterval(() => { updateDisplay(getCurrentSentence()); }, 1000);UI/UX 디자인
- 타이포그래피 중심: 문장 자체가 주인공
- 미니멀리즘: 불필요한 요소 제거, 텍스트와 시간에 집중
- 가독성: 다양한 화면 크기에서 편안한 읽기 경험
- 부드러운 전환: 분이 바뀔 때 자연스러운 페이드 효과
3. 데이터 구조
json
{ "6:43": { "sentence": "It was a quarter to seven when I woke...", "book": "1984", "author": "George Orwell", "language": "en" }, "18:43": { "sentence": "저녁 여섯시 사십삼분, 그는 문을 열었다.", "book": "채식주의자", "author": "한강", "language": "ko" } }
개발 과정에서 마주한 챌린지
1. 모든 시간대를 채우기
- 문제: 일부 시간대(새벽 3시, 오후 2시 등)는 문학 작품에 잘 등장하지 않음
- 해결:
- 더 넓은 범위의 문학 작품 탐색
- 비슷한 시간 표현 허용 (“3시쯤”, “around 3” 등)
- 커뮤니티 기여로 비어있는 시간대 채우기 계획
2. 다국어 시간 표현의 다양성
- 문제: 각 언어마다 시간 표현 방식이 완전히 다름
- 영어: “3:00 PM”, “three o’clock”
- 한국어: “오후 3시”, “세시”, “3시”
- 해결: 언어별 정규표현식 패턴 세트 구축
3. 저작권 이슈
- 원칙: 퍼블릭 도메인 또는 CC 라이선스 작품만 사용
- 출처 명시: 모든 문장에 작품명과 작가 표기
기술적 최적화
성능 개선
- 정적 생성: 1440개의 문장을 빌드 타임에 JSON으로 생성
- 레이지 로딩: 현재 시간 전후 데이터만 우선 로드
- 캐싱 전략: 브라우저 캐시 활용으로 반복 방문 시 빠른 로딩
반응형 디자인
css
/* 모바일에서도 읽기 편한 타이포그래피 */ .sentence { font-size: clamp(1.2rem, 4vw, 2.5rem); line-height: 1.6; max-width: 65ch; }
배포 및 호스팅
- 플랫폼: coolify 자체서버 구축 (빠른 배포와 무료 SSL)
- 도메인: clock.loonshotstudio.com
- CDN: 전 세계 어디서든 빠른 접속
프로젝트의 의미: PoC로 시작하는 창작
PoC(Proof of Concept)의 가치
이 프로젝트는 “일단 만들어보자“는 철학으로 시작했다.
- 완벽한 기획 대신 빠른 프로토타이핑
- 복잡한 백엔드 없이 정적 데이터로 MVP 구현
- 사용자 반응을 보고 점진적으로 개선
만들면서 배운 것들
- 제약이 창의성을 만든다: 1440개라는 명확한 목표가 오히려 프로젝트를 구체화했다
- 완벽보다 완성: 모든 시간대를 완벽히 채우지 못해도 서비스 시작 가능
- 작은 아이디어의 힘: 단순해 보이는 컨셉이 사람들에게 의외의 감동을 줄 수 있다
향후 계획
단기 로드맵
- 더 많은 문학 작품 추가 (목표: 각 시간당 3~5개 선택지)
- 사용자 기여 시스템 (문장 제안 기능)
- 배경화면 / 스크린세이버 / 위젯 버전
장기 비전
- 물리적 e-ink 디스플레이 시계
- 커뮤니티 큐레이션 플랫폼
당신의 아이디어를 기다립니다
이 프로젝트는 “만들고 싶은 게 있으면 일단 만들어보자”는 실험의 일부다.
혹시 당신도 이런 생각 해본 적 있나요?
- “이런 서비스 있으면 좋을 텐데…”
- “아무도 안 만들었으니 내가 만들어볼까?”
- “작지만 누군가에게 의미 있는 것”
함께 만들어봐요.
소소한 아이디어든, 황당한 상상이든 괜찮습니다. 댓글로, 이메일로, 어떤 방식으로든 알려주세요. 같이 만들어보면 재미있을 것 같습니다.
링크 & 리소스
- 프로젝트: https://clock.loonshotstudio.com/
- 피드백: harry@loonshotstudio.com, loonshotstudio@gmail.com
#문장의시간 #LiteraryClock #사이드프로젝트 #PoC #웹개발 #문학 #타이포그래피 #인디메이커 #크리에이티브코딩 #오픈소스 #웹디자인 #프론트엔드 #React #NextJS #토이프로젝트 #개발자 #디자이너 #문학시계 #시계
